<template>
  <div class="x-resize-handle" @mousedown.prevent="resizeX"
       :style="{ left: offsetLeft + 'px' }">>
  </div>
</template>

<script>
  export default {
    name: 'HorizontalResizeHandle',
    props: {
      offsetLeft: {
        type: Number,
        default: 0,
      },
      parentId: {
        type: String,
        required: true,
      },
      minWidth: {
        type: Number,
        default: 0,
      },
      maxWidth: {
        type: Number,
        default: 500,
      },
      handlePosition: {
        type: String,
        default: 'right',
      },
    },
    data() {
      return {
        offset: 0,
      };
    },
    methods: {
      resizeX: function(event) {
        let targetParent = document.getElementById(this.parentId);

        document.onmousemove = e => {
          let width = e.clientX - targetParent.getBoundingClientRect().left;
          if (this.handlePosition === 'left') {
            width = -(width - targetParent.clientWidth);
          }
          let t = width > this.minWidth ? width < this.maxWidth ? width :
            this.maxWidth :
            this.minWidth;
          if (this.handlePosition === 'right') {
            event.target.style.left = t + 'px';
          }
          targetParent.style.width = t + 'px';

          this.$emit('cubeViewMove', t + 40);
        };
        document.onmouseup = function(e) {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      },
    },
  };
</script>

<style>
  .x-resize-handle {
    position: absolute;
    top: 0;
    cursor: w-resize;
    opacity: 0;
    width: 5px;
    height: 100%;
    background-color: darkgray;
    box-shadow: inset 10px 0 10px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 10px 0 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset 10px 0 10px rgba(0, 0, 0, 0.1);
  }
</style>

